<template>
  <!-- 超标统计 -->
  <view class="conter">
    <cc-timeA title='排量统计' text='选择时间' color='#fff' @confirm="confirm_a"></cc-timeA>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="head_b" :class="{head_a:falg==0}" @click="cheang">
        厂界
      </view>
      <view class="head_b" :class="{head_a:falg==1}" @click="cheang_a">
        排口
      </view>
    </view>
    <uni-card>
      <view class="chart">
        超标散点图
      </view>
      <view class="region">
        <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
    </uni-card>
    <!-- 表格卡片 -->
    <uni-card>
      <view class="list_word">
        超标列表
      </view>
      <view class="list">
        <!-- 表格 -->
        <uni-table border stripe class="box">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="25%" align="center">名称</uni-th>
            <uni-th width="25%" align="center">超标设备</uni-th>
            <uni-th width="25%" align="center">超标比例</uni-th>
            <uni-th width="25%" align="center">超标浓度</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,i) in over_standardList.list" :key='i'>
            <uni-td align="center">{{item.enterPriseName}}</uni-td>
            <uni-td align="center">{{item.overNum}}</uni-td>
            <uni-td align="center">{{item.overRate}}%</uni-td>
            <uni-td align="center" style="color: #FF7F6C;">{{item.tvoc}}{{item.unit}}</uni-td>
          </uni-tr>
         <!-- <uni-tr>
            <uni-td align="center">大勇</uni-td>
            <uni-td align="center">6</uni-td>
            <uni-td align="center" style="color: #B10A01;">120%</uni-td>
            <uni-td align="center" style="color: #B10A01;">23mg/m³</uni-td>
          </uni-tr> -->
        </uni-table>
      </view>
    </uni-card>
  </view>
</template>

<script>
   import echarts from '@/components/echarts/echarts.vue';
  export default {
    data() {
      return {
        falg: 0,
        startTime:'',
        endTime:'',
        choice:'',
        over_standardList:'',
        option:{
            xAxis: {},
            yAxis: {name: '浓度'},
            series: [{
                // symbolSize: 20,
                data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                    [13.0, 7.58],
                    [9.05, 8.81],
                    [11.0, 8.33],
                    [14.0, 7.66],
                    [13.4, 6.81],
                    [10.0, 6.33],
                    [14.0, 8.96],
                    [12.5, 6.82],
                    [9.15, 7.20],
                    [11.5, 7.20],
                    [3.03, 4.23],
                    [12.2, 7.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96],
                    [6.03, 7.24],
                    [12.0, 6.26],
                    [12.0, 8.84],
                    [7.08, 5.82],
                    [5.02, 5.68],
                    [4.08, 5.82],
                    [3.02, 5.18],
                    [5.92, 5.08],
                    [4.08, 5.10],
                    [3.82, 9.68],
                    [2.12, 8.98],
                    [2.22, 8.68],
                    [2.32, 6.68],
                    [12, 2],
                    [10.09, 2.68],
                    [9.32, 3.68]
                ],
                type: 'scatter'
            }]
        }
      }
    },
    methods: {
      getOver_standard(){
        this.$http.get('/envirnment-air/app/analysis/standardOver/overEnterprises',{
          dateRange:this.startTime+','+this.endTime,
          dateType:this.choice,
          type:this.falg
        }).then(res=>{
          this.over_standardList = res.data
          // console.log('getOver_standard',res)
        })
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.startTime = e.startTime
        this.endTime = e.endTime
        this.choice = e.choice
        // console.log('fjowefjie',e)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
        this.getOver_standard()
      },
      cheang_a() {
        this.falg = 1
        this.getOver_standard()
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    // height: 1452rpx;
    background: #F7F7F7;
    overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
    width: 688rpx;
    height: 66rpx;
    display: flex;
    margin: 25rpx auto;
  }

  .head_a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: #4EA1FF !important;
    color: #fff;
    border-radius: 8rpx;
  }

  .head_b {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: #fff;
    border-radius: 8rpx;
  }

  .chart {
    // height: 633rpx;
  }

  .list_word {
    margin-bottom: 16rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
